<!DOCTYPE html>
<html ng-app = "app4" ng-cloak>
        <head >
		<title>AngularJS Tutorial2</title>
		<style type="text/css">
			[ng\:cloak], [ng-cloak], .ng-cloak{
				display: none;
			}
			.bluetext{
				color: blue;
			}
			.boldtext{
				font-weight: bold;
			}
			.stripedblue{
				color: #007FFF;
				background-color: #DBE9F4;
			}
			.stripedbeige{
				color: #CC0000;
				background-color: #F5F5DC;
			}
		</style>
	</head>
	<body>
		<!-- ############################### -->
		<div ng-controller="eventCtrl">
                	<input ng-blur="blur = blur + 1"
                			ng-click = "click = click + 1"
                			ng-dblclick = "dblclick = dblclick + 1"
                			ng-copy = "copy = copy + 1"
                			ng-paste = "paste = paste + 1"
                			ng-cut = "cut = cut + 1"
                			ng-focus = "focus = focus + 1"
                			ng-model= "confirmed"
                			ng-change = "change = change + 1"
                			ng-keydown = "keydown($event)"
                			ng-mouseenter = "mouseenter = mouseenter + 1"
                			ng-mouseleave = "mouseleave = mouseleave + 1">
                	<h4>Blur events: {{blur}}</h4>
                	<h4>Click events: {{click}}</h4>
                	<h4>Double click evens: {{dblclick}}</h4>
                	<h4>Copy events: {{copy}}</h4>
                	<h4>Paste events: {{paste}}</h4>
                	<h4>Cut events: {{cut}}</h4>
                	<h4>Focus events: {{focus}}</h4>
                	<h4>Change events: {{change}}</h4>

                	<h4>Key Pressed: {{kbdKey}}</h4>

                	<h4>Mouse Enter Events: {{mouseenter}}</h4>
                	<h4>Mouse Leave Events: {{mouseleave}}</h4>

                        <!-- ############################################-->
                	<p>
                		<button ng-disabled="disableButton">Button</button>
                	</p>

                	<p>
                		<input type="checkbox"
                				ng-model="disableButton">DisableButton
                	</p>
                        
                        <!-- ######################################-->
                        <p>
                                <input type="checkbox" ng-model="dayTimeButton">Morning
                        </p>                    

                        <p ng-hide="!dayTimeButton">Good Morning</p>
                        <p ng-hide="dayTimeButton">Good Evening</p>
                        <!-- ######################################-->

                        <p>
                                <select ng-model="textStyling">
                                        <option value="bluetext">Blue text</option>
                                        <option value="boldtext">Bold text</option>
                                </select>
                        </p>

                        <p ng-class="textStyling">Some random Text</p>
                                <!-- #######################################-->

                        <table>
                                <tr ng-repeat="item in capitals" 
                                        ng-class-even="'stripedblue'"
                                        ng-class-odd="'stripedbeige'">
                                        <td>{{item.City}}</td>
                                        <td>{{item.State}}</td>
                                </tr>
                        </table>

                
                
                </div>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
		<script type="text/javascript" src="js/exam4.js"></script>
	</body>
</html>